<template>
	<div class="home-container">
		<tool-bar></tool-bar>
		<side-bar :list="dataStore.roomList" @point-click="hanlePointClick"></side-bar>
		<coordinate-canvas ref="coordinateCanvasRef" :data="dataStore.coordinateData" @mode-changed="handleModeChanged"></coordinate-canvas>
		<import-data-modal></import-data-modal>
		<area-filter-form-modal></area-filter-form-modal>
		<clear-canvas-modal></clear-canvas-modal>
		<input-point-modal></input-point-modal>
	</div>
</template>

<script setup>
import { ref, provide } from 'vue';
import { useEditorStore, useDataStore, useModalStore } from '@/store';
import ToolBar from '../components/ToolBar/ToolBar.vue';
import SideBar from '../components/SideBar/SideBar.vue';
import CoordinateCanvas from '../components/CoordinateCanvas/CoordinateCanvas.vue';
import ImportDataModal from '../components/Dialog/ImportDataModal.vue';
import AreaFilterFormModal from '@/components/Dialog/AreaFilterFormModal.vue';
import ClearCanvasModal from '@/components/Dialog/ClearCanvasModal.vue';
import InputPointModal from '@/components/Dialog/InputPointModal.vue';

const coordinateCanvasRef = ref(null);

// 使用Pinia stores
const editorStore = useEditorStore();
const dataStore = useDataStore();
const modalStore = useModalStore();

// 提供 coordinateCanvas 实例给子组件使用
provide('coordinateCanvasRef', coordinateCanvasRef);

const hanlePointClick = (data) => {
	console.log('点击的点位:', data.pointData);
	console.log('所属房间:', data.roomData);
	coordinateCanvasRef.value.biggerPoint({
		x: data.pointData.x,
		y: data.pointData.y,
		roomName: data.roomData.name
	});
}

// 监听模式变化事件
const handleModeChanged = (newMode) => {
	editorStore.setMode(newMode);
}

</script>

<style lang="scss" scoped>
.home-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
}
</style>